<template>
	<view class="	content-box">
		<view class="card">
			<view class="title">
				品牌·车型
			</view>
			<view class="form-item">
				<view class="lable">
					选择座位数
				</view>
				<view class="tag-box">
					<view class="tag-item" :class="{'active-item':typeIndex===index}" v-for="(item, index) in typeList" @click="setTypeIndex(index)">
						{{item.text}}
					</view>
				</view>
			</view>
			<view class="form-item" style="margin-top: 8rpx;">
				<view class="lable">
					选择座位数
				</view>
				<view class="value">
					去选择>
				</view>
			</view>
		</view>
		
		<view class="card" style="margin-top: 20rpx;">
			<view class="title">
				车辆照片 
				<text class="hint">
					请上传真实车辆照片
				</text>
			</view>
			<view class="vehicle-photo">
				<image src="../../../static/logo.png" mode=""></image>
			</view>
			
			<view class="title">
				车牌号码
			</view>
			
			<view class="licencePlate">
				<car-number-input @numberInputResult="numberInputResult" :defaultStr="defaultNum"></car-number-input>
			</view>
			    
    
			
			<view class="title">
				行驶证照片 
			</view>
			<text class="hint" style="padding:20rpx 10rpx;">
				请上传行驶证(蓝本)照片，注意信息完成，否则无法通过
			</text>
			<view class="vehicle-photo" style="margin-top: 36rpx;">
				<image src="../../../static/logo.png" mode=""></image>
			</view>
			<view class="btn">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList:[{
					text:'五座'
				},{
					text:'七座'
				},{
					text:'九座'
				}],
				typeIndex:-1,
				defaultNum: '京A'
			}
		},
		methods: {
			setTypeIndex(index){
				if(this.typeIndex===index) return this.typeIndex=-1;
				this.typeIndex=index
			},
			numberInputResult(e) {
				console.log('结果--' + e)
			}
		}
	}
</script>

<style lang="scss">
	.content-box{
		background-color: #f5f5f5;
		min-height: calc(100vh - 40rpx);
		padding: 20rpx 0;
	}
	.card{
		background-color: #ffffff;
		padding: 32rpx 0;
		.title {
			font-size: 28rpx;
			color: #333333;
			font-weight: 700;
			position: relative;
			padding-left: 20rpx;
			
			display: flex;
			align-items: center;
		
			&:before {
				content: '';
				width: 12rpx;
				height: 24rpx;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background: $theme-color;
			}
		}
		.hint{
			color: #999999;
			font-weight: 100;
			margin-left: 10rpx;
			font-size: 24rpx;
		}
		.form-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 40rpx;
			font-size: 28rpx;
			.lable{
				color: #999999;
				
			}
			.value{
				color: #666666;
			}
		}
		
		.tag-box{
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx 0;
			justify-content: flex-end;
			.tag-item{
				padding: 12rpx 36rpx;
				background-color: rgba(203, 203, 203, 0.20);
				border-radius: 10rpx;
				border: 2rpx solid #CBCBCB;
				font-size: 28rpx;
				color: #999999;
				margin-left: 20rpx;
			}
			.active-item{
				background-color: rgba(254, 175, 172, 0.20);
				border: 2rpx solid #FEAFAC;
				color: #FEAFAC;
			}
		}
	
	    .vehicle-photo{
			width: 316rpx;
			height: 238rpx;
			margin: 20rpx 40rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		
		.licencePlate{
			display: flex;
			padding: 20rpx 0 50rpx 0;
		}
		
		.btn{
			width: 338rpx;
			height: 80rpx;
			background: #FFCE4E;
			border-radius: 40rpx;
			font-size: 28rpx;
			line-height: 80rpx;
			color: #FFFFFF;
			text-align: center;
			margin: 96rpx auto 20rpx auto;
		}
	}
</style>
